<template>
  <div>
    <span class="view-link" @click="downloadFile">下载</span>
  </div>
</template>
<script lang="ts" setup>
import axios from "axios";
import { ElMessage } from "element-plus";
const props = defineProps({
  fileUrl: {
    type: String,
    default: "",
  },
  fileName: {
    type: String,
    default: "默认文件名",
  },
});
const downloadFile = async () => {
  if (!props.fileUrl) return;
  try {
    const response = await axios.get(props.fileUrl, {
      responseType: "blob", // 告诉 Axios 返回的数据是一个 Blob 对象
    });
    const url = window.URL.createObjectURL(new Blob([response.data])); // 创建一个临时的 URL 对象
    const link = document.createElement("a"); // 创建一个 <a> 标签元素
    link.href = url;
    link.setAttribute("download", props.fileName); // 设置下载的文件名
    document.body.appendChild(link); // 将 <a> 标签添加到页面中
    link.click(); // 模拟点击 <a> 标签进行下载
    document.body.removeChild(link); // 下载完成后，移除 <a> 标签和临时的 URL 对象
    window.URL.revokeObjectURL(url);
  } catch (error) {
    ElMessage.error("文件下载失败：" + error);
  }
};
</script>
<style lang="scss" scoped>
.view-link {
  cursor: pointer;
  color: #0079fe;
}
</style>
